<template>
  <div class="container">
    <scroll-view scroll-y
                 scroll-with-animation
                 style="height:100%">
      <div class="form">
        <!-- 收款人手机号 -->
        <div class="section send-tel">
          <div class="sl">
            收款人手机号
          </div>
          <div class="sr">
            <input type="number"
                   name=""
                   class="inp"
                   maxlength="11"
                   placeholder="请输入收款人手机号"
                   placeholder-class="placeholder"
                   v-model="user_tel"
                   id="">
          </div>
        </div>
        <!-- 转让金币 -->
        <div class="section coin">
          <div class="sl">
            转让金币
            <div class="tip">
              当前账户可转让金币{{page_data.gold}}
            </div>
          </div>
          <div class="sr">
            <input type="number"
                   name=""
                   class="inp"
                   maxlength="11"
                   placeholder="请输入转让金币数量"
                   placeholder-class="placeholder"
                   v-model="gold_num">
          </div>
        </div>
        <!-- 您绑定的手机号 -->
        <div class="section bind-tel">
          <div class="sl">
            您绑定的手机号
          </div>
          <div class="sr">
            <input type="number"
                   name=""
                   class="inp"
                   maxlength="11"
                   disabled
                   v-model="page_data.mobile"
                   id="">
          </div>
        </div>
        <!-- 您绑定的手机号 -->
        <div class="section bind-tel">
          <div class="sl">
            验证码
          </div>
          <div class="sr">
            <input type="number"
                   name=""
                   class="inp"
                   placeholder="请输入验证码"
                   placeholder-class="placeholder"
                   maxlength="6"
                   v-model="chec_code"
                   id="">
          </div>
          <div class="msg-btn"
               @tap="get_code()">
            {{timer_num>=60?'获取验证码':timer_num+'s'}}
          </div>
        </div>
      </div>
    </scroll-view>
    <div class="model"
         v-if="show_model">
      <div class="model-content clearfix">
        <div class="m-title">
          金币转让细则
        </div>
        <div class="m-msg">
          亲爱的美亿齿用户：<br />
          你们好！<br />
          2020年5月31日前待返未提现金币以及已返未提现的金币，可转让给其他拥有美亿齿账号的人进行使用，转让后的金币保留转让权限且价值不变，但不再支持提现，仅支持平台内部使用流通。
        </div>
      </div>
      <div class="timer-btn">
        {{timer_model}}S
      </div>
    </div>
    <div class="sub-btn"
         @tap="sub_form()">
      立即转出
    </div>
  </div>
</template>

<script>
import common from '@/assets/js/mmk_common.js'
let timer, model_timer
export default {
  data () {
    return {
      base_url: common.image_resource,
      img_url: common.image_response,
      page_data: {},
      user_tel: "",
      chec_code: "",
      gold_num: "",
      timer_num: 60,
      timer_model: 15,
      show_model: false
    }
  },
  watch: {
    // 金币
    gold_num (newVal, oldVal) {
      if (newVal <= 0 || (newVal + "").startsWith("0")) {
        this.gold_num = "";
      } else {
        this.gold_num =
          newVal > this.page_data.gold
            ? this.page_data.gold
            : newVal;
      }
    },
  },
  methods: {
    //   获取页面数据
    get_data () {
      wx.showLoading({
        title: '', //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      common.fly_post("/api/v4_5/c2c/gold_transfer_info", {}, result => {
        let res = result.data
        wx.hideLoading();
        if (res.status_code == 0) {
          this.page_data = res.data
          if (this.page_data.mobile) {
            this.page_data.mobile = this.page_data.mobile.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2")
          }
        } else {
          wx.showToast({
            title: res.message, //提示的内容,
            icon: 'none', //图标,
            duration: 1500, //延迟时间,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
        }
      })
    },
    // 获取验证码
    get_code () {
      if (this.timer_num < 60) {
        return false
      }
      wx.showLoading({
        title: '', //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      common.fly_post("api/v4_5/order_gold/sms_code", {
        type: 1117
      }, result => {
        let res = result.data
        wx.hideLoading();
        if (res.status_code == 0) {
          wx.showToast({
            title: '短信发送成功', //提示的内容,
            icon: 'none', //图标,
            duration: 1500, //延迟时间,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
          timer = setInterval(() => {
            this.timer_num--
            if (this.timer_num <= 0) {
              this.timer_num = 60
              clearInterval(timer)
            }
          }, 1000);
        } else {
          wx.showToast({
            title: res.message, //提示的内容,
            icon: 'none', //图标,
            duration: 1500, //延迟时间,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
        }
      })
    },
    // 提交
    sub_form () {
      let that = this
      if (this.user_tel == '' || this.user_tel.trim() == '') {
        wx.showToast({
          title: '请输入收款人手机号', //提示的内容,
          icon: 'none', //图标,
          duration: 1500, //延迟时间,
          mask: true, //显示透明蒙层，防止触摸穿透,
          success: res => { }
        });
        return false
      }
      if (this.gold_num == '' || this.gold_num.trim() == '') {
        wx.showToast({
          title: '请输入要转让的金币', //提示的内容,
          icon: 'none', //图标,
          duration: 1500, //延迟时间,
          mask: true, //显示透明蒙层，防止触摸穿透,
          success: res => { }
        });
        return false
      }
      if (this.chec_code == '' || this.chec_code.trim() == '') {
        wx.showToast({
          title: '请输入验证码', //提示的内容,
          icon: 'none', //图标,
          duration: 1500, //延迟时间,
          mask: true, //显示透明蒙层，防止触摸穿透,
          success: res => { }
        });
        return false
      }
      that.transfer_gold()
    },
    // 转让金币
    transfer_gold () {
      let that = this
      wx.showLoading({
        title: '', //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      common.fly_post("api/v4_5/c2c/gold_transfer_submit", {
        code: this.chec_code,
        mobile: this.user_tel,
        gold: this.gold_num
      }, result => {
        let res = result.data
        wx.hideLoading();
        if (res.status_code == 0) {
          wx.showToast({
            title: '转让成功', //提示的内容,
            icon: 'success', //图标,
            duration: 1500, //延迟时间,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: res => {
              setTimeout(() => {
                wx.navigateBack({
                  delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
                });
              }, 1500);
            }
          });
        } else {
          wx.showToast({
            title: res.message, //提示的内容,
            icon: 'none', //图标,
            duration: 1500, //延迟时间,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
        }
      })
    }

  },
  onShow () {
    let that = this
    wx.setNavigationBarTitle({ title: '转金币' });
    this.get_data()
    this.show_model = true
    model_timer = setInterval(() => {
      that.timer_model--
      if (that.timer_model <= 0) {
        clearInterval(model_timer)
        that.show_model = false
      }
    }, 1000);
  },
  onHide () {
    clearInterval(model_timer)
  },
  onUnload () {
    clearInterval(model_timer)
  },
  onLoad () {
    Object.assign(this.$data, this.$options.data());

  }
}
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background: rgba(243, 244, 246, 1);
  .form {
    width: 100%;
    background: rgba(255, 255, 255, 1);
    padding: 0 15px;
    box-sizing: border-box;
    .section {
      display: flex;
      border-bottom: 1px solid rgba(243, 244, 246, 1);
      .sl {
        flex: 1;
        font-size: 16px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 20px;
      }
      .sr {
        flex: 1;
        .inp {
          font-size: 16px;
          font-family: "PingFangSC-Regular", "PingFang SC";
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          text-align: right;
        }
        .placeholder {
          font-size: 16px;
          font-family: "PingFangSC-Regular", "PingFang SC";
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
        }
      }
      &:last-of-type {
        border-bottom: none;
      }
      &.send-tel {
        padding: 30px 0 18px;
        box-sizing: border-box;
      }
      &.coin {
        padding: 18px 0;
        .sl {
          .tip {
            font-size: 12px;
            font-family: "PingFangSC-Regular", "PingFang SC";
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            margin-top: 6px;
          }
        }
        .sr {
        }
      }
      &.bind-tel {
        padding: 18px 0;
        .sl,
        .sr {
          line-height: 26px;
          .inp {
            width: 100%;
            height: 100%;
          }
        }
        .msg-btn {
          font-size: 14px;
          font-family: "PingFangSC-Regular", "PingFang SC";
          font-weight: 400;
          color: rgba(255, 115, 164, 1);
          width: 78px;
          height: 26px;
          border-radius: 5px;
          border: 1px solid rgba(255, 115, 164, 1);
          line-height: 26px;
          text-align: center;
          margin-left: 24px;
        }
      }
    }
  }
  .sub-btn {
    width: 89%;
    height: 40px;
    background: linear-gradient(
      226deg,
      rgba(254, 120, 161, 1) 0%,
      rgba(254, 123, 136, 1) 100%
    );
    border-radius: 100px;
    font-size: 16px;
    font-family: "PingFangSC-Medium", "PingFang SC";
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    line-height: 40px;
    text-align: center;
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
  }
  .model {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.71);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
    .model-content {
      width: 80%;
      margin: 86px auto 0;
      background-image: url("https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.2.4/%E7%BC%96%E7%BB%84%203.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      .m-title {
        font-size: 20px;
        font-family: "AlibabaPuHuiTiB";
        color: rgba(255, 255, 255, 1);
        line-height: 27px;
        margin: 33px 0 28px;
        text-align: center;
      }
      .m-msg {
        font-size: 14px;
        font-family: "PingFangSC-Medium", "PingFang SC";
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 23px;
        margin: 0 23px 80px;
      }
    }
    .timer-btn {
      width: 44px;
      height: 20px;
      background: rgba(255, 255, 255, 0.43);
      border-radius: 11px;
      font-size: 14px;
      font-family: "PingFangSC-Regular", "PingFang SC";
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 20px;
      text-align: center;
      margin: 20px auto;
    }
  }
}
</style>